<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/12 Time: 22:52
To change this template use File | Settings | File Templates. --%>
<%@ page
        contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>营销机会管理</title>
    <!-- 移入引入共同的页面样式 -->
    <jsp:include page="../common/css_js.jsp"/>
    <jsp:include page="../common/table.jsp"/>
</head>
<body>
<div class="container col-lg-12">
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <b style="font-size: 25px">营销机会列表--所有营销机会信息</b><br/>
                <h6>创建和维护营销机会</h6>
            </div>
        </header>
        <div class="card-body">
            <!-- 条件查询表单 -->
            <form class="form-inline" name="form1" action="#" method="post">
                <b>机会来源：</b>
                <label
                ><input
                        name="chanceSource"
                        placeholder="请输入要查询的机会来源"
                        class="form-control"/></label
                >&nbsp;&nbsp;
                <b>创建人：</b>
                <label
                ><select name="createMan" class="form-control"></select></label
                >&nbsp;&nbsp;
                <b>状态：</b>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline33"
                            name="state"
                            value=""
                            checked="checked"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline33"
                    >全部</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline11"
                            name="state"
                            value="1"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline11"
                    >已分配</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline22"
                            name="state"
                            value="2"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline22"
                    >未分配</label
                    >
                </div>
                <button type="button" class="btn btn-primary" onclick="like()">
                    <span class="mdi mdi-table-search"></span>搜索
                </button>
            </form>
            <div id="toolbar">
                <!-- 操作 -->
                <button class="btn btn-primary" href="#" onclick="toAdd()">
                    <span class="mdi mdi-plus"></span>新增营销机会
                </button>
                <button class="btn btn-danger" href="#" onclick="batchDelete('sale-chance')">
                    <span class="mdi mdi-delete"></span>批量删除
                </button>
                <button class="btn btn-primary" href="#" onclick="query()">
                    <span class="mdi mdi-table-large"></span>显示所有
                </button>
            </div>
            <!-- 数据显示 -->
            <div class="table-responsive">
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div
        class="modal fade bd-example-modal-lg"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">新增营销机会信息</h4>
                <div class="col-md-2 column"></div>
                <div class="col-md-4 column" id="close"></div>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                >
                    <a aria-hidden="true">&times;</a>
                </button>
            </div>
            <div class="modal-body" style="background-color: #f8faf7">
                <!-- 增加修改表单 -->
                <div class="table-responsive">
                    <form>
                        <table class="table table-bordered table-hover" id="tab333">
                            <input type="hidden" name="id"/>
                            <input type="hidden" name="createMan"/>
                            <input type="hidden" name="state"/>
                            <input type="hidden" name="devResult"/>
                            <input type="hidden" name="assignTime"/>
                            <input type="hidden" name="updateDate"/>
                            <tr>
                                <td>客户名称：</td>
                                <td>
                                    <label
                                    ><input
                                            class="form-control"
                                            name="customerName"
                                            placeholder="请输入客户名称"
                                    /></label>
                                </td>
                                <td>机会来源：</td>
                                <td>
                                    <label
                                    ><input
                                            class="form-control"
                                            name="chanceSource"
                                            placeholder="请输入机会来源"
                                    /></label>
                                </td>
                            </tr>
                            <tr>
                                <td>联系人：</td>
                                <td>
                                    <label
                                    ><input
                                            class="form-control"
                                            name="linkageMan"
                                            placeholder="请输入联系人"
                                    /></label>
                                </td>
                                <td>联系人电话：</td>
                                <td>
                                    <label
                                    ><input
                                            class="form-control"
                                            name="linkagePhone"
                                            placeholder="请输入联系人电话"
                                    /></label>
                                </td>
                            </tr>
                            <tr>
                                <td>概要：</td>
                                <td>
                                    <label
                                    ><input
                                            class="form-control"
                                            name="overview"
                                            placeholder="请输入概要"
                                    /></label>
                                </td>
                                <td>成功几率(%)：</td>
                                <td>
                                    <label
                                    ><input
                                            class="form-control"
                                            name="cgjl"
                                            placeholder="请输入成功几率"
                                    /></label>
                                </td>
                            </tr>
                            <tr>
                                <td>机会描述：</td>
                                <td colspan="3">
                                    <label>
                        <textarea
                                name="description"
                                cols="80"
                                class="form-control"
                                placeholder="请输入机会描述"
                        ></textarea>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>指派给：</td>
                                <td>
                                    <label
                                    ><select class="form-control" name="assignMan"></select
                                    ></label>
                                </td>
                                <td>是否有效：</td>
                                <td>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline1"
                                                name="isValid"
                                                value="1"
                                                class="custom-control-input"
                                                checked="checked"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline1"
                                        >有效</label
                                        >
                                    </div>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline2"
                                                name="isValid"
                                                value="0"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline2"
                                        >无效</label
                                        >
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button
                        type="button"
                        id="btn111"
                        class="btn btn-primary"
                        onclick="insert_update()"
                >
                    修改
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 加载事件
    $(function () {
        // 初始化表格
        $("#table").bootstrapTable({
            classes: "table table-bordered table-hover table-striped text-nowrap", // 表格样式
            url: "${ctx}/sale-chance/list?assignMan=${sessionScope.session_user.username}", // 请求后台的URL
            method: "GET", // 请求方式
            toolbar: "#toolbar", // 工具按钮容器
            pagination: true, //是否显示分页条
            pageNumber: 1, // 首页页码，默认为1
            pageSize: 5, //一页显示的行数
            paginationLoop: false, //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
            pageList: [5, 10, 20], //选择每页显示多少行，数据过少时可能会没有效果
            clickToSelect: true, // 是否启用点击选中行
            undefinedText: "-", // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            // 响应处理
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }

                return res.data;
            },
            // 查询参数
            queryParams: function () {
                // 查询条件
                return $("[name='form1']").serializeArray(); // 得到条件查询表单中所有的值
            },
            columns: [
                {
                    // 列
                    field: "example",
                    checkbox: true, // 是否显示复选框
                },
                {
                    field: "no", // 属性名
                    align: "center", // 对齐方式
                    title: "序号", // 标题
                    formatter: function (value, row, index) {
                        return index + 1;
                    },
                },
                {
                    field: "id",
                    title: "编号",
                    visible: false,
                },
                {
                    field: "chanceSource",
                    align: "center",
                    title: "机会来源",
                },
                {
                    field: "customerName",
                    align: "center",
                    title: "客户名称",
                },
                {
                    field: "cgjl",
                    align: "center",
                    title: "成功几率",
                    formatter: function (value, row, index) {
                        return (
                            "<span>" +
                            row.cgjl +
                            "%</span><div class='progress progress-striped progress-sm'>" +
                            "<div class='progress-bar progress-bar-danger' style='width: " +
                            row.cgjl +
                            "%;'></div></div>"
                        );
                    },
                },
                {
                    field: "overview",
                    align: "center",
                    title: "概要",
                },
                {
                    field: "linkageMan",
                    align: "center",
                    title: "联系人",
                },
                {
                    field: "linkagePhone",
                    align: "center",
                    title: "联系人电话",
                },
                {
                    field: "description",
                    align: "center",
                    title: "描述",
                },
                {
                    field: "createMan",
                    align: "center",
                    title: "创建人",
                },
                {
                    field: "state",
                    align: "center",
                    title: "状态",
                    formatter: function (value, row, index) {
                        if (row.state === 1) {
                            return "<span class='text-success'>已分配</span>";
                        } else if (row.state === 2) {
                            return "<span class='text-danger'>未分配</span>";
                        } else {
                            return "-";
                        }
                    },
                },
                {
                    field: "isValid",
                    align: "center",
                    title: "是否有效",
                    formatter: function (value, row, index) {
                        // 格式化
                        if (row.isValid === 1) {
                            return "<span class='badge badge-success'>有效</sapn>";
                        } else if (row.isValid === 0) {
                            return "<span class='badge badge-danger'>无效</span>";
                        } else {
                            return "<span class='badge badge-info'>-</span>";
                        }
                    },
                },
                {
                    field: "createDate",
                    align: "center",
                    title: "创建时间",
                },
                {
                    field: "operate",
                    align: "center",
                    title: "操作",
                    formatter: btnGroup,
                    events: {
                        // 事件
                        "click .edit-btn": function (event, value, row, index) {
                            edit(row);
                        },
                        "click .del-btn": function (event, value, row, index) {
                            remove("sale-chance", r.id);
                        },
                    },
                },
            ],
            onLoadSuccess: function () {
                // 数据加载成功时调用的方法
            },
            onLoadError: function () {
                // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function () {
                // 复选框单击事件
                getSelections();
            },
        });

        // 销售经理
        $("[name='assignMan']").append(
            "<option value=''>请选择销售经理</option>"
        );
        $.get("${ctx}/user/findCustomer", function (data) {
            $(data).each(function (i, o) {
                $("[name='assignMan']").append(
                    "<option value='" + o.username + "'>" + o.username + "</option>"
                );
            });
        });

        // 创建人
        $("[name='createMan']").append("<option value=''>请选择</option>");
        $.get("${ctx}/user/findCreateSaleChance", function (data) {
            $(data).each(function (i, o) {
                $("[name='createMan']").append(
                    "<option value='" + o.username + "'>" + o.username + "</option>"
                );
            });
        });
    });

    // 操作按钮 - 新增
    function toAdd() {
        // 模态框显示
        $("#myModal").modal("show");
        // 模态框标题
        $("#myModalLabel").html("新增营销机会");
        // 清空表单
        $("form")[1].reset();
        // 清空隐藏域
        $("input[type='hidden']").val("");
        $("[name='createMan']:eq(1)").val(
            "${sessionScope.session_user.username}"
        );
        // 将按钮修改为保存
        $("#btn111").html("保存");
    }

    // 操作按钮 - 编辑
    function edit(r) {
        // 模态框显示
        $("#myModal").modal("show");
        // 模态框标题
        $("#myModalLabel").html("修改营销机会");
        // 赋值
        $("[name='id']").val(r.id);
        $("[name='customerName']").val(r.customerName);
        $("[name='chanceSource']:eq(1)").val(r.chanceSource);
        $("[name='createMan']:eq(1)").val(
            "${sessionScope.session_user.username}"
        );
        $("[name='linkageMan']").val(r.linkageMan);
        $("[name='linkagePhone']").val(r.linkagePhone);
        $("[name='overview' ]").val(r.overview);
        $("[name='cgjl']").val(r.cgjl);
        $("[name='description']").val(r.description);
        r.isValid === 1
            ? $("[name='isValid']:eq(3)").prop("checked", true)
            : $("[name='isValid']:eq(4)").prop("checked", true);
        $("[name='updateDate']").val(getFormatDate());
        $("[name='assignMan']").val(r.assignMan);
        $("#state").val(r.state);
        $("[name='devResult']").val(r.devResult);
        $("[name='assignTime']").val(r.assignTime);

        // 将按钮修改为修改
        $("#btn111").html("修改");
    }

    // 增加和修改用一个按钮
    function insert_update() {
        let b = false;

        let $customerName = $("[name='customerName']");
        let $chanceSource = $("[name='chanceSource']:eq(1)");
        let $linkageMan = $("[name='linkageMan']");
        let $linkagePhone = $("[name='linkagePhone']");
        // 验证手机号码格式
        let phoneReg =
            /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        let $overview = $("[name='overview']");
        let $cgjl = $("[name='cgjl']");

        if ($customerName.val() === "") {
            $customerName.focus();
            notify("mdi mdi-close", "客户名称为必填项！", "danger");
        } else if ($chanceSource.val() === "") {
            $chanceSource.focus();
            notify("mdi mdi-close", "机会来源为必填项！", "danger");
        } else if ($linkageMan.val() === "") {
            $linkageMan.focus();
            notify("mdi mdi-close", "联系人为必填项！", "danger");
        } else if ($linkagePhone.val() === "") {
            $linkagePhone.focus();
            notify("mdi mdi-close", "联系人电话号码为必填项！", "danger");
        } else if (!phoneReg.test($linkagePhone.val())) {
            $linkagePhone.focus();
            notify("mdi mdi-close", "电话号码格式错误！请重新输入...", "danger");
        } else if ($overview.val() === "") {
            $overview.focus();
            notify("mdi mdi-close", "概要为必填项！", "danger");
        } else if ($cgjl.val() === "") {
            $cgjl.focus();
            notify("mdi mdi-close", "成功几率为必填项！", "danger");
        } else {
            b = true;
        }

        if (b) {
            // 根据按钮判断是增加还是修改
            let url =
                $("#btn111").html() === "保存"
                    ? "${ctx}/sale-chance/save"
                    : "${ctx}/sale-chance/update";

            // 判断是否分配
            if ($("[name='assignMan']").val() === "") {
                $("[name='state']:eq(3)").val(2);
                $("[name='assignTime']").val("");
                $("[name='devResult']").val(3);
            } else {
                $("[name='state']:eq(3)").val(1);
                $("[name='assignTime']").val(getFormatDate());
                $("[name='devResult']").val(2);
            }

            // 得到表单中所有值
            let obj = $("form:eq(1)").serializeArray();

            // 根据路径调用方法
            saveOrUpdate(url, obj);
        }
    }
</script>
</body>
</html>
